<template>
	<view class="c-box" @click.stop="selectItem">
		<view class="coupon-com -flex">
			<view class="cp-l -flex -flex-col -flex-ac -flex-jc">
				<view class="cpp-l-num -flex -flex-ac">
					<text class="cp-ico" v-if="coupon.type == 1">¥</text>
					<text class="cp-no">{{ parseFloat(coupon.denomination) || 0 }}</text>
					<text class="cp-ico cp-icr" v-if="coupon.type == 2">折</text>
				</view>
				<view class="cp-tip">
					{{ coupon.type_name }}
				</view>
			</view>
			<view class="cp-r -flex">
				<view class="cp-info">
					<view class="cp-title text-limit-2">
						{{ coupon.name }}
					</view>

					<view class="cp-desc" v-if="coupon.desc" v-html="coupon.desc">
					</view>

					<view class="cp-time text-limit-1" v-if="coupon.start_time">
						{{ coupon.start_time }} 至 {{ coupon.end_time }}
					</view>
				</view>
				<view class="cp-btn -flex -flex-col -flex-ac -flex-jc" v-if="coupon_code == coupon.code">
					已选中
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const {
	proxy
} = getCurrentInstance()
const emit = defineEmits(['onActive'])
const props = defineProps({
	coupon: {
		type: Object,
	},
	curr_code: {
		type: String
	}
})
const {
	coupon
} = toRefs(props)



const coupon_code = ref('')
function selectItem() {
	coupon_code.value = props.coupon.code
	emit('onActive', props.coupon)
}

watch(() => props.curr_code, (val) => {
	coupon_code.value = val
})
</script>

<style lang="scss" scoped>
.-flex {
	display: flex;
}

.-flex-ac {
	align-items: center;
}

.-flex-jc {
	justify-content: center;
}

.-flex-col {
	flex-direction: column;
}

.c-box {
	margin-bottom: 24rpx;
	border-radius: 24rpx;

	.content {
		background-color: #fff;
		padding: 20rpx;
		border-top: 1px solid $bg;
		color: #000;
		font-size: 26rpx;
		line-height: 1.6;
		border-radius: 24rpx;
	}
}

.coupon-com {
	width: 100%;
	min-height: 200rpx;



	.cp-l {
		width: 200rpx;
		background: #fff3f2;
		position: relative;
		border-radius: 24rpx;
		// &::after {
		// 	width: 36rpx;
		// 	height: 36rpx;
		// 	background: $bg;
		// 	position: absolute;
		// 	right: -18rpx;
		// 	top: -18rpx;
		// 	border-radius: 50%;
		// 	content: " ";
		// }

		// &::before {
		// 	width: 36rpx;
		// 	height: 36rpx;
		// 	background: $bg;
		// 	position: absolute;
		// 	right: -18rpx;
		// 	bottom: -18rpx;
		// 	border-radius: 50%;
		// 	content: " ";
		// }

		.cpp-l-num {
			font-weight: bold;
			font-size: 54rpx;
			color: #f00;

			.cp-ico {
				font-size: 24rpx;
				margin-right: 6rpx;
				// position: relative;
				// top: 8rpx;
				// right: 4rpx;
			}

			.cp-icr {
				margin-left: 6rpx;
			}
		}

		.cp-tip {
			font-size: 24rpx;
			color: #f00;
			margin-top: 4rpx;
		}

	}

	.cp-r {
		border: 1px solid #ececec;
		flex: 1;
		border-radius: 24rpx;
		background: #fff;

		.cp-info {
			// height: 200rpx;
			flex: 1;
			padding: 20rpx;
			text-align: left;

			.cp-title {
				max-width: 400rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
				min-height: 72rpx;
			}

			.cp-desc {
				font-size: 22rpx;
				color: #999;
				margin-top: 8rpx;
				// height: 64rpx;
				// overflow: hidden;
			}

			.cp-time {
				font-size: 24rpx;
				color: #999;
				margin-top: 14rpx;
			}
		}

		.cp-btn {
			width: 80rpx;
			writing-mode: vertical-rl;
			/*文字竖排属性*/
			text-orientation: mixed;
			border-left: 1px dashed #ececec;
			font-size: 24rpx;
			letter-spacing: 4px;
			color: #fc7565;
		}

		.cp-btn-end {
			// border-color: #999;
			color: #999;
		}
	}
}
</style>